<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个页面</title>
    </head>
    <body>
        <h1 align="center">一级标题</h1>
        <p>如果希望在不产生一个新段落的情况下进行换行,<br>可以使用br换行标签</p>
        
        <!-- 绝对路径 -->
        <h3>绝对路径</h3>
        <img src="/Users/nathanwu/MyDrafts/课程/WebGIS/HUNNU/Source/HTML5/test.jpeg" alt="测试图片">
        <hr color="grey">

        <!-- 相对路径 -->
        <h3>相对路径</h3>
        <h4>同级路径</h4>
        <img src="test.jpeg" alt="测试图片">

        <h4>子级路径</h4>
        <img src="images/test2.webp" alt="测试图片">

        <h4>父级路径</h4>
        <img src="../test3.webp" alt="测试图片">
        <hr color="grey">

        <!-- 网络路径 -->
        <h3>网络路径</h3>
        <img src="http://news.cjn.cn/sywh/201310/W020131025316775255240.jpg">

        <h3>超链接</h3>
        <a href="https://www.baidu.com">我是个已经访问过的超链接</a>
        <a href="https://www.apple.com">我是个没有被过的的超链接</a>
        <a href="https://www.apple.com">
            <img src="images/atest.webp" alt="测试图片">
        </a>

        <h3>文本标签</h3>

        <p>包子</p>

        <em>包子</em>
        <i>包子</i>
        <b>包子</b>
        <strong>包子</strong>
        <del>包子</del>
        <span>包子</span>

        <h3>列表标签</h3>
        <h4>有序列表</h4>
        <ol type="1">
            <li>香蕉</li>
            <li>苹果</li>
            <li>西瓜</li>
            <li>榴莲</li>
        </ol>

        <ol type="A">
            <li>香蕉</li>
            <li>苹果</li>
            <li>西瓜</li>
            <li>榴莲</li>
        </ol>

        <ol type="a">
            <li>香蕉</li>
            <li>苹果</li>
            <li>西瓜</li>
            <li>榴莲</li>
        </ol>

        <ol type="I">
            <li>香蕉</li>
            <li>苹果</li>
            <li>西瓜</li>
            <li>榴莲</li>
        </ol>

        <ol type="i">
            <li>香蕉</li>
            <li>苹果</li>
            <li>西瓜</li>
            <li>榴莲</li>
        </ol>

        <ol type="A">
            <li>
                水果
                <ol type="a">
                    <li>香蕉</li>
                    <li>苹果</li>
                    <li>西瓜</li>
                    <li>榴莲</li>
                </ol>
            </li>
            <li>
                蔬菜
                <ol type="a">
                    <li>黄瓜</li>
                    <li>
                        白菜
                        <ol>
                            <li>大白菜</li>
                            <li>小白菜</li>
                        </ol>
                    </li>
                    <li>西红柿</li>
                    <li>洋葱</li>
                </ol>
            </li>
            <li>谷物</li>
        </ol>

        <h4>无序列表</h4>
        <ul type="disc">
            <li>香蕉</li>
            <li>苹果</li>
            <li>西瓜</li>
            <li>榴莲</li>
        </ul>

        <ul type="circle">
            <li>香蕉</li>
            <li>苹果</li>
            <li>西瓜</li>
            <li>榴莲</li>
        </ul>

        <ul type="square">
            <li>香蕉</li>
            <li>苹果</li>
            <li>西瓜</li>
            <li>榴莲</li>
        </ul>

        <ul type="none">
            <li>香蕉</li>
            <li>苹果</li>
            <li>西瓜</li>
            <li>榴莲</li>
        </ul>


        <ul type="A">
            <li>
                水果
                <ul type="a">
                    <li>香蕉</li>
                    <li>苹果</li>
                    <li>西瓜</li>
                    <li>榴莲</li>
                </l>
            </li>
            <li>
                蔬菜
                <ul type="a">
                    <li>黄瓜</li>
                    <li>
                        白菜
                        <ul>
                            <li>大白菜</li>
                            <li>小白菜</li>
                        </ul>
                    </li>
                    <li>西红柿</li>
                    <li>洋葱</li>
                </ul>
            </li>
            <li>谷物</li>
        </ul>

        <h3>表格标签</h3>

        <table>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小南</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小北</td>
                <td>女</td>
            </tr>
        </table>

        <h4>表格属性</h4>
        <!-- 设置table属性 -->
        <table border="1" width="200px" height="100px">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小南</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小北</td>
                <td>女</td>
            </tr>
        </table>
        
        <h4>单元格合并</h4>
        <!-- 单元格合并 -->
        <table border="1" width="400px" height="200px">
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
                <td>单元格5</td>
            </tr>
            <tr>
                <td colspan="3">合并6、7、8</td>
                <td>单元格9</td>
                <td>单元格10</td>
            </tr>
            <tr>
                <td>单元格11</td>
                <td>单元格12</td>
                <td>单元格13</td>        
                <td>单元格14</td>
                <td rowspan="2">合并15、20</td>
            </tr>
            <tr>
                <td colspan="2" rowspan="2">合并16、17、21、22</td>
                <td>单元格18</td>
                <td>单元格19</td>
            </tr>
            <tr>
                <td>单元格23</td>
                <td>单元格24</td>
                <td>单元格25</td>
            </tr>
        </table>

        <h3>Form表单标签</h3>
        <form action="url" method="get|post" name="myForm"></form>

        <form>
            <input type="text">
            <input type="submit">
        </form>

        <form action="url" method="get">
            用户名：<input type="text" name="uid">
            昵称：<input type="text" name="uname">
            密码：<input type="password" name="pwd">
            <input type="submit" value="登录">
        </form>

        <div id="header"></div>
        <div id="nav"></div>
        <div id="article">
            <div id="section"></div>
        </div>
        <div id="sidebar"></div>
        <div id="footer"></div>

    </body>
</html>



